<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		localPath="report"
	</script>
<script type="text/javascript">
$(function(){

	$.ajax({
		url:"/ajax/reports/data", 
		success: function(rpts){
			var xs = _.pluck(rpts, 'rdate')
			//渲染图表
			var chart = echarts.init(document.getElementById("chart"),'macarons')
			var option = {
				tooltip:{
					trigger: 'axis'
				},
				title: {
					text: ''
				},
				legend: {
		            data:['曝光量（次）','点击量（次）','总花费']
		        },
		        xAxis: {
		            data: xs
		        },
		        yAxis: {},
		        series: [{
		            name: '曝光量（次）',
		            smooth:true,
		            type: 'line',
		            areaStyle: {
		                normal: {}
		            },
		            data: _.pluck(rpts, 'pv')
		        },{
		            name: '点击量（次）',
		            smooth:true,
		            type: 'line',
		            areaStyle: {
		                normal: {}
		            },
		            data: _.pluck(rpts, 'pc')
		        },{
		            name: '总花费',
		            smooth:true,
		            type: 'line',
		            areaStyle: {
		                normal: {}
		            },
		            data: _.pluck(rpts, 'total_cost')
		        }]
			}
			//
			chart.setOption(option)
		},
		cache:false,
		contentType:"json"})	
})
</script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt ng-scope">
  <h3 class="no-margin">整体统计</h3>
</div>
<div class="p-md ng-scope">
<ul class="nav nav-tabs" >
        <li class="active">
          <a href="javascript:void(0)">整体统计</a>
        </li>
        <li>
          <a href="/reports/campaigns" >计划统计</a>
        </li>
        <!-- <li>
          <a href="/reports/ads" >广告统计</a>
        </li> -->
      </ul>
      <div class="p b-a no-b-t bg-white m-b ng-scope"  >
  <div class="panel no-border">
    <div class="panel-body "  >
      <div id="chart" style="height: 400px;">
      
      </div>
    </div>
  </div>
     <table id="rptCampTable"  class="table table-bordered table-hover bg-white">
      <thead>
        <tr>
          <th>时间</th>
          <th>曝光量</th>
          <th>点击量</th>
          <th>点击率</th>
          <th>平均点击费用</th>
          <th>千次展示费用</th>
          <th>花费</th>
        </tr>
      </thead>
      <tbody></tbody>
        <colgroup>
        <col>
        <col width="12%">
        <col width="12%">
        <col width="12%">
        <col width="16%">
        <col width="16%">
        <col width="12%">
        </colgroup>
      <tbody>
      <c:if test="${!empty form.rpts}">
	        <c:forEach items="${form.rpts }" varStatus="i" var="rpt">
	        <tr>
	          <td>
	             ${rpt["rdate"] } 
	          </td>
	          <td>
	            ${rpt["pv"] }
	          </td>
	          <td>
	             ${rpt["pc"] }
	          </td>
	          <td><fmt:formatNumber value="${rpt['ctr'] }" maxFractionDigits="2" />%</td>
	          <td>￥<fmt:formatNumber value="${rpt['avgClickCost'] }" maxFractionDigits="2" /></td>
	          <td>￥<fmt:formatNumber value="${rpt['viewCost'] }" maxFractionDigits="2" /></td>
	          <td>￥<fmt:formatNumber value="${rpt['total_cost'] }" maxFractionDigits="2" /></td>
	        </tr>
	        </c:forEach>
        </c:if>
      </tbody>
    </table>
      </div>
</div>
</body>
</html>